<template>
    <div id="box">
        <div class="header">
            <div class="headerCon">
                <div class="chooseAddress">
                    <el-dropdown @command="handleCommand">
                      <span class="el-dropdown-link">
                        <span v-if="receivingTelephone!=''">
                            <span>
                                <p>{{receivingName}}</p>
                                <p>{{receivingTelephone}}</p>
                            </span>
                            <span>
                                <p>{{receivingAddress}}</p>
                            </span>
                        </span>
                          <span v-else>
                              请选择收货地址
                          </span>
                          <i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item class="elDropDownItem" :command="item.addressId" v-for="(item,i) in address" :key="i">
                                <p>{{item.contactName}}</p>
                                <p>{{item.contactPhone}}</p>
                                <p>{{item.address}}</p>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div class="arrivalTime">
                    <span style="">立即送出</span>
                    <span>
                        <p>大约15:32送达</p>
                        <i class="el-icon-arrow-right"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="contentCon">
                <div class="merchantName">
                    {{shop.shopName}}
                </div>
                <div class="selectedGoods">
                    <div class="goodsItem" v-for="(item,i) in selected">
                        <div class="goodsLeft">
                            <img src="http://127.0.0.1:3000/static/img/avatar.jpg" alt="">
                        </div>
                        <div class="goodsRight">
                            <div>
                                <span>
                                    <p class="goodsName">{{item.goodsName}}</p>
                                </span>
                                <span>
                                    ￥
                                    <p class="price">
                                        {{item.goodsPrice}}
                                    </p>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="otherCost">
                    <div class="otherCostCon">
                        <div class="packingFee">
<!--                             <span>-->
<!--                                包装费-->
<!--                            </span>-->
<!--                            <span>-->
<!--                                ￥1-->
<!--                            </span>-->
                        </div>
                        <div class="shippingFee">
                            <span>
                                配送费
                            </span>
                            <span>
                                ￥{{shippingFee}}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="totalCost">
                    <span>
                        ￥
                        <p>{{totalPrice}}</p>
                    </span>
                </div>

            </div>
        </div>
        <div class="remarks">
            <div class="remarksCon">
                <div class="">
                    <span>
                        备注
                    </span>
                    <el-input
                            placeholder="请输入内容"
                            v-model="remarks"
                            clearable>
                    </el-input>
                </div>
            </div>
        </div>
        <div class="payment">
            <div class="paymentCon">
                <span>
                    <h3>￥</h3>
                    <h2>{{finalPrice}}</h2>
                </span>
                <el-button type="warning" @click="placeOrder">提交订单</el-button>
            </div>
            <el-drawer
                    title="输入支付密码"
                    :append-to-body="true"
                    direction="btt"
                    :size="'30%'"
                    :visible.sync="innerDrawer">
               <div style="display: flex;justify-content: center">
                   <div style="display: flex;justify-content: center;flex-direction: column;width: 90%">
                       <el-input v-model="payCode" maxlength="6" type="password" show-word-limit></el-input>
                       <el-button style="align-self: flex-end;margin-top: 10px" type="primary" :loading="loading" @click="toPay">确认支付</el-button>
                   </div>
               </div>
            </el-drawer>
        </div>
    </div>
</template>

<script>
    import qs from 'qs'
    export default {
        name: "pay",
        props:['selected','totalPrice','shippingFee','shop'],
        data(){
          return {
              loading:false,
              payCode:'',
              innerDrawer:false,
              receivingName:'',
              receivingTelephone:'',
              receivingAddress:'',
              remarks:'',
              address:[],
              orderId:''
          }
        },
        computed:{
            finalPrice(){
                return parseFloat(this.shippingFee) + parseFloat(this.totalPrice)
            }
        },
        methods:{
            toPay(){
                this.loading=true
                let data = qs.stringify({
                    userId:this.$store.state.user.userId,
                    payCode:this.payCode,
                    orderId:this.orderId
                })
                this.$axios({
                    method:'post',
                    data,url:'/user/doPay'
                }).then(r=>{
                    if(r.data.err_code===0){
                        this.$message.success('支付成功')
                        // this.$router.push('/home/shop/'+this.shop.shopId)
                        this.$emit('paySuc')
                    }
                    if(r.data.err_code===1){
                        this.$message.error('支付密码错误')
                    }
                    if(r.data.err_code===2){
                        this.$message.error('网络异常')
                    }
                    this.payCode=this.remarks=this.receivingName=this.receivingTelephone=this.receivingAddress=''
                    this.innerDrawer=this.loading=false

                }).catch(err=>{
                    this.payCode=this.remarks=this.receivingName=this.receivingTelephone=this.receivingAddress=''
                    this.innerDrawer=this.loading=false
                    this.$message.error('网络异常')
                })
            },
            handleCommand(command) {
                this.address.forEach(item=>{
                    if(item.addressId === command){
                        this.receivingName = item.contactName
                        this.receivingTelephone = item.contactPhone
                        this.receivingAddress = item.address
                        return
                    }
                })

            },
            getAddress(){
                this.$axios({
                    methods:'get',
                    params:{
                        userId:this.$store.getters.getId
                    },
                    url:'/user/getAddress'
                }).then(r=>{
                    if(r.data.err_code===0){
                        return this.address = r.data.address
                    }
                    this.address = []
                })
            },
            placeOrder(){
                if(this.receivingTelephone==''){
                    this.$message.warning('您还没有选择收货地址哦')
                }else{
                    let data={
                        order:{
                            receivingName:this.receivingName,
                            receivingTelephone:this.receivingTelephone,
                            receivingAddress:this.receivingAddress,
                            shopId:this.shop.shopId,
                            userId:this.$store.state.user.userId,
                            remarks:this.remarks,
                            orderAmount:this.finalPrice,
                            shippingFee:this.shippingFee
                        },
                        goodsList:this.selected,
                    }
                    let headers={
                        'content-type':'application/json'
                    }
                    // this.$message.success(window.JSON.stringify(params))
                    // console.log(qs.stringify(data));
                    if(this.orderId!=''){
                        return this.innerDrawer = true
                    }
                    this.$axios({
                        method:'post',
                        url:'/order/placeOrder',data
                    }).then(r=>{
                        if(r.data.err_code===0){
                            this.innerDrawer = true
                            this.orderId = r.data.result
                        }else{
                            this.$message.error('网络错误')
                        }
                    }).catch(err=>{
                        this.$message.error('网络错误')
                    })
                }
            }
        },
        created() {
            this.getAddress()
        }
    }
</script>

<style lang="less" scoped>
    .elDropDownItem{
        display: flex;
        flex-wrap: wrap;
        p{
            padding-right: 10px;
        }
    }
    .el-dropdown{
        width: 100%;
    }
    .el-dropdown-link{
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        >span{
            display: flex;
            flex-direction: column;
            >span{
                display: flex;
                p{
                    padding-right: 10px;
                    font-size: 15px;
                }
            }
        }
    }
    #box{
        background:url("http://127.0.0.1:3000/static/img/nav/bg.png") no-repeat;
        background-size: 100%;
        background-color: whitesmoke;
        height:800px;
        overflow-y: scroll;
        padding-bottom: 80px;
        position: relative;
    }
    .header{
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .headerCon{
        width: 95%;
        margin-top: 10px;
        display: flex;
        justify-content: center;
        border-radius: 10px;
        background-color: white;
        align-items: center;
        flex-direction: column;
        .chooseAddress{
            width: 95%;
            padding: 10px 0;
            border-bottom: 1px solid #EDEDED;
            span{
                font-size: 20px;
                color: #9D9D9D;
            }
        }
        .arrivalTime{
            width: 95%;
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            span{
                display: flex;
                justify-content: space-between;
                align-items: center;
                p{
                    padding-right: 10px;
                    color:#5083E2;
                }
            }
        }
    }
    .content{
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 10px 0;
        .contentCon{
            width: 95%;
            background-color: white;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            .merchantName{
                border-bottom: 1px solid #EDEDED;
                color: #656565;
                width: 95%;
                padding: 20px 0;
            }
            .selectedGoods{
                display: flex;
                align-items: center;
                flex-direction: column;
                width: 90%;
                padding: 10px 0;
                .goodsItem{
                    display: flex;
                    width: 100%;
                    justify-content: space-between;
                    border-bottom: 1px solid #EDEDED;
                    padding: 10px 0;
                    .goodsRight{
                        flex: 1;
                        display: flex;
                        justify-content: center;
                        div{
                            width: 100%;
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;
                            padding-left: 10px;
                            span{

                                display: flex;
                                align-items: center;
                                flex-direction: row;
                                .price,.goodsName{
                                    font-weight: 700;
                                }
                                .price{
                                    font-size: 18px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .otherCost{
        width: 90%;
        padding-bottom: 10px;
        .otherCostCon{
            border-bottom: 1px solid #EDEDED;
            display: flex;
            flex-direction: column;
            div{
                padding: 10px 0;
                display: flex;
                justify-content: space-between;
                span:last-child{
                    font-weight: 900;
                }
            }
        }
    }
    .goodsLeft{
    width: 50px;
    img{
        width: 100%;
    }
}
    .totalCost{
        padding: 10px 0;
        width: 90%;
        display: flex;
        justify-content: flex-end;
        span{
            display: flex;
            align-items: center;
            p{
                font-size: 25px;
                font-weight: 900;
            }
        }
    }
    .remarks{
        width: 100%;
        display: flex;
        justify-content: center;
        .remarksCon{
            width: 95%;
            background-color: white;
            border-radius: 10px;
            padding: 10px 0;
            display: flex;
            justify-content: center;
            div{

                display: flex;
                justify-content: space-between;
                flex-direction: row;
                width: 95%;
                span{
                    min-width: 20%;
                    display: flex;
                    align-items: center;
                }
            }
        }
    }
    .payment{
        position: fixed;
        width: 100%;
        display: flex;
        justify-content: center;
        bottom: 10px;
        left: 0;
        .paymentCon{
            width: 95%;
            background-color: #323332;
            height: 65px;
            border-radius: 30px;
            display: flex;
            justify-content: space-between;
            overflow: hidden;
            span:first-child{
                height: 100%;
                padding: 0 10px;
                color: white;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            /deep/ .el-button{
                color: black;
                font-size: 18px;
                background-color: #FBCD62;
            }
        }
    }
</style>